<!-- start: PAGE TITLE -->
<section id="page-title">
	<div class="row">
		<div class="col-sm-12">
			<h1 class="mainTitle" translate="sidebar.nav.scheduling.CALENDAR">{{ mainTitle }}</h1>
			<span class="mainDescription" translate="sidebar.nav.scheduling.MAINDesc">A port of the bootstrap calendar widget to AngularJS (no jQuery required).</span>
		</div>
		 
	</div>
</section>
<!-- end: PAGE TITLE -->
<!-- start: CALENDAR -->
<div class="container-fluid container-fullw bg-white">
	<div class="row">
		<div class="col-md-12">
			<div ng-controller="adminCalendarCtrl" id="demo" class="row">
				<div class="col-md-12" style="margin-top:-50px">
                    <div class="col-md-6 text-left row">
					    <div class="col-xs-12 form-inline text-left" style="padding:15px">
						    <div class="input-group">
							    <button class="btn btn-primary" mwl-date-modifier date="calendarDate" decrement="calendarView"><i class="ti-angle-left"></i>
							    </button>
								<button class="btn btn-primary" mwl-date-modifier date="calendarDate" increment="calendarView">
									<i class="ti-angle-right"></i>
								</button>
						    </div>
						    <button class="btn btn-primary btn-o form-group" mwl-date-modifier date="calendarDate" set-to-today>
							    <span translate="calendar.TODAY">TODAY</span>
						    </button>
						    <h2 class="form-group" style="font-weight:bold">{{calendarTitle}} </h2>						
					    </div>
					    <div class="visible-md visible-lg hidden-sm hidden-xs col-xs-12 form-inline text-left row" style="padding:15px">
					        <div class="input-group">
						        <label class="btn btn-primary" ng-model="calendarView" btn-radio="'month'">
							        <span translate="calendar.MONTH">Month</span>
						        </label>
						        <label class="btn btn-primary" ng-model="calendarView" btn-radio="'week'">
							        <span translate="calendar.WEEK">Week</span>
						        </label>
					        </div>
						    <div class="border-light form-group">
						        <span class="btn btn-primary btn-o btn-file">选择文件
			                        <input name="uploadedFile" type="file" nv-file-select=""  uploader="importUploader" />
			                    </span>
						        <a uploader="importUploader" class="btn btn-wide btn-primary" ladda="ldloading.expand_right"  ng-disabled="!(importUploader.getNotUploadedItems().length>0)" ng-click="import()"><span translate="sidebar.nav.configuremanagerdb.LISTButton.IMPORT">Import Data</span><i class="fa fa-cloud-upload"></i></a>
						    </div>
			            </div>
			        </div>
					<div class="col-md-6 text-right row" >
				      <div class="alert alert-block alert-warning">
				          <div ng-repeat="event in externalEvents track by $index"
				            mwl-draggable="true" drop-data="{event: event}" class="border-light row">
				            <div class="form-group col-md-8 col-md-offset-2">
				            	<div class="input-group">
						            <ui-select multiple   tagging tagging-tokens="SPACE|,|/"  ng-model="event.users" theme="bootstrap" class="form-control" reset-search-input="true" search-enabled="true" append-to-body="true">
									    <ui-select-match placeholder="请选择值班人...">{{$item.name}}</ui-select-match>
									    <ui-select-choices repeat="option in users | filter: $select.search" refresh="refreshUser($select.search)" refresh-delay="0">
									    	<div ng-bind-html="option['name'] | highlight: $select.search"></div>
									    	<!-- <small>
									    		<img ng-src="assets/images/avatar-{{option['gender']=='男'?'1':'2'}}.jpg" class="messages-item-avatar bordered border-primary"/>
									    	</small> -->
									    </ui-select-choices>
									</ui-select>
									<span
						              href="javascript:;" class="text-white input-group-addon"
						              ng-class="'event-'+ event.type">
						              {{ event.title }}
						            </span>
								</div>
							</div>
				        </div>
				    </div>
				</div>	
				<div class="col-md-12">				
				<!--div class="row "  >
					
					<div class="col-xs-8 text-left" style="margin-top:-130px" >
						<div class="btn-group col-md-2">
							<button class="btn btn-primary" mwl-date-modifier date="calendarDate" decrement="calendarView">
								<i class="ti-angle-left"></i>
							</button>
							<button class="btn btn-primary" mwl-date-modifier date="calendarDate" increment="calendarView">
								<i class="ti-angle-right"></i>
							</button>
							

						</div>

						<button class="btn btn-primary btn-o form-group col-md-1" mwl-date-modifier date="calendarDate" set-to-today>
							<span translate="calendar.TODAY">TODAY</span>
						</button>
						<h2 class="col-md-2" style="font-weight:bold">{{calendarTitle}} </h2>
					</div>
					
				</div-->
		        <!-- <div style="margin-top:-60px"> -->
				<!-- <div class="visible-md visible-lg hidden-sm hidden-xs col-xs-2">
					<div class="btn-group">
						<label class="btn btn-primary" ng-model="calendarView" btn-radio="'month'">
							<span translate="calendar.MONTH">Month</span>
						</label>
						<label class="btn btn-primary" ng-model="calendarView" btn-radio="'week'">
							<span translate="calendar.WEEK">Week</span>
						</label>
					</div>
			    </div>
			    <div class="border-light row">
			        <span class="btn btn-primary btn-o btn-file">选择文件
                        <input name="uploadedFile" type="file" nv-file-select=""  uploader="importUploader" />
                    </span>
			        <a uploader="importUploader" class="btn btn-wide btn-primary" ladda="ldloading.expand_right"  ng-disabled="!(importUploader.getNotUploadedItems().length>0)" ng-click="import()"><span translate="sidebar.nav.configuremanagerdb.LISTButton.IMPORT">Import Data</span><i class="fa fa-cloud-upload"></i></a>
			    </div> -->
		    <!-- </div> -->
				
				<!-- view-title="calendarTitle" -->
				<mwl-calendar
				    view="calendarView"
				    view-date="calendarDate"
				    view-title="calendarTitle"
				    events="events"				    
				    on-event-click="eventClicked(calendarEvent)"
				    on-event-times-changed="eventDropped(calendarEvent, calendarNewEventStart, calendarNewEventEnd)"
				    edit-event-html="'<i class=\'glyphicon glyphicon-pencil\'></i>'"
				    delete-event-html="'<i class=\'glyphicon glyphicon-remove\'></i>'"
				    on-edit-event-click="eventClicked(calendarEvent)"
				    on-delete-event-click="eventDeleted(calendarEvent)"
				    calendar-time-label="时间"
					calendar-event-label="描述"
				    cell-is-open="false">
				</mwl-calendar>
				<br>
				<br>
				<br>
				<!-- start: EDIT EVENT TEMPLATE -->
				<script type="text/ng-template" id="calendarEvent.html">
					<div class="modal-body">
					<div class="form-group">
					<label>
					值班描述
					</label>
					<input type="text" placeholder="Enter title" class="form-control underline text-large" ng-model="event.title" >
					</div>
					<div class="form-group">
					<label>
					值班人
					</label>
					<ui-select multiple limit="2" tagging tagging-tokens="SPACE|,|/"  ng-model="event.users" theme="bootstrap" reset-search-input="true" search-enabled="true" append-to-body="true">
					    <ui-select-match placeholder="请选择值班人...">{{$item.name}}</ui-select-match>
					    <ui-select-choices repeat="option in modalusers | filter: $select.search" refresh="refreshModalUser($select.search)" refresh-delay="0">
					    	<div ng-bind-html="option['name'] | highlight: $select.search"></div>
					    </ui-select-choices>
					</ui-select>
					</div>
					<div class="form-group">
					<label>
					开始
					</label>
					<span class="input-icon">
					<input type="text" class="form-control underline" ng-click="startOpen = !startOpen" ng-change="setEndOpen()" datepicker-popup="yyyy-MM-dd" ng-model="event.startTime" is-open="startOpen" ng-init="startOpen = false" min-date="currentDate" close-text="关闭" current-text="今天" clear-text="清空"  />
					<i class="ti-calendar"></i> </span>
					<timepicker ng-model="event.startTime" readonly-input="true" show-meridian="true" disable-meridian="true" ng-show="!event.allDay" mousewheel="false" arrowkeys="false" show-spinners="false"></timepicker>
					</div>
					<div class="form-group">
					<label>
					结束
					</label>
					<span class="input-icon">
					<input type="text" class="form-control underline" ng-click="endOpen = !endOpen" datepicker-popup="yyyy-MM-dd" ng-disabled="'disabled'" ng-model="event.endTime" is-open="endOpen" ng-init="endOpen = false" min-date="event.startTime" close-text="关闭" current-text="今天" clear-text="清空" />
					<i class="ti-calendar"></i> </span>
					<timepicker ng-model="event.endTime" readonly-input="true" show-meridian="true" disable-meridian="true" ng-show="!event.allDay" mousewheel="false" arrowkeys="false" show-spinners="false"></timepicker>
					</div>
					<div class="form-group">
					<label>
					值班类型
					</label>
					<div class="row">
					<div class="col-xs-6">
					<div class="radio clip-radio radio-primary">
					<input type="radio" id="job" name="optionsCategory" value="job" ng-model="event.type">
					<label for="job">
					<span class="fa fa-circle text-primary"></span> 白班
					</label>
					</div>
					<div class="radio clip-radio radio-primary">
					<input type="radio" id="home" name="optionsCategory" value="home" ng-model="event.type">
					<label for="home">
					<span class="fa fa-circle text-purple"></span> 晚班
					</label>
					</div>
					</div>
					</div>
					</div>
					</div>
					</div>
					<div class="modal-footer">
					<button class="btn btn-danger btn-o" ng-click="deleteEvent(event)">
					删除
					</button>
					<button class="btn btn-primary btn-o" ng-click="ok(event)">
					确认
					</button>
					</div>
				</script>
			</div>
		  </div>
		</div>
	</div>
</div>
<!-- end: CALENDAR -->
